<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="lib/theme-chalk/index.css">
	</head>
	<style>
		.el-input {
			width: 170px;
		}

		.el-popover {
			color: #f56c6c;
		}
	</style>
	<body>
		<div id="app">
			<el-input v-model="oInput" placeholder="请输入内容"></el-input>
			<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
			<el-select v-model="value" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-input v-model="required" placeholder="必填项" v-popover:popover1></el-input>
			<el-popover ref="popover1" placement="top-start" width="200" trigger="hover" content="这是必填项">
			</el-popover>
			<el-radio-group v-model="resource">
				<el-radio label="线上品牌商赞助"></el-radio>
				<el-radio label="线下场地免费"></el-radio>
			</el-radio-group>
			<el-date-picker v-model="value1" type="date" placeholder="选择日期">
			</el-date-picker>
			<el-input type="textarea" v-model="desc"></el-input>
		</div>
		<script src="lib/vue2.5.js"></script>
		<script src="lib/index.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					oInput: '',
					num1: 1,
					value: '',
					required: '',
					resource: '',
					value1: '',
					desc: '',
					options: [{
						value: '选项1',
						label: '黄金糕'
					}, {
						value: '选项2',
						label: '双皮奶'
					}, {
						value: '选项3',
						label: '蚵仔煎'
					}, {
						value: '选项4',
						label: '龙须面'
					}, {
						value: '选项5',
						label: '北京烤鸭'
					}],
					ruleForm: {
						name: ''
					},
					rules: {
						name: [{
								required: true,
								message: '请输入活动名称',
								trigger: 'blur'
							},
							{
								min: 3,
								max: 5,
								message: '长度在 3 到 5 个字符',
								trigger: 'blur'
							}
						]
					}
				},
				methods: {
					handleChange(value) {
						console.log(value);
					}
				}
			})
		</script>
	</body>
</html>
